<template>
  <div class="loading-wrapper">
    <div 
      v-loading="loading"
      element-loading-text="加载中..."
      element-loading-background="rgba(255, 255, 255, 0.9)"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.loading-wrapper {
  width: 100%;
  min-height: 200px;
  position: relative;
}

:deep(.el-loading-spinner) {
  .el-loading-text {
    color: var(--el-text-color-primary);
    font-size: 14px;
    margin: 8px 0;
  }
}

:deep(.el-loading-spinner .circular) {
  width: 36px;
  height: 36px;
}
</style> 